<template>
	<view class="vipP">
		<image @click="goBuy" style="width:100%;height:100%" src="../../style/image/myPos/vip.png" alt="" />

		<!-- <u-action-sheet :tips='支付方式' :list="list" v-model="show">
        <view>123</view>
        </u-action-sheet> -->
		<u-popup v-model="show" mode="bottom">
			<view class="modelPP">
				<view class="modelP">

					<view style="text-align: center">
						<view style="padding: 0rem 0.5rem 0.5rem 0.5rem">支付方式</view>
					</view>

					<view class="item-one">
						<view class="item-one-left">
							<image style="width: 1rem; height: 1rem" class="one-image" src="../../style/image/order/yue.png" alt="" />
							<view style="padding-left: 1.8rem">余额支付(¥9800.00)</view>
						</view>
						<image class="two-image" src="../../style/image/cargo/round.png" alt="" />
					</view>

					<view class="item-one">
						<view class="item-one-left">
							<image style="width: 1rem; height: 1rem" class="three-image" src="../../style/image/order/C2.png" alt="" />
							<view style="padding-left: 1.8rem">微信支付</view>
						</view>

						<image class="two-image" src="../../style/image/cargo/round.png" alt="" />
					</view>

					<view class="item-one">
						<view class="item-one-left">
							<image style="width: 1rem; height: 1rem" class="three-image" src="../../style/image/order/apily.png" alt="" />
							<view style="padding-left: 1.8rem">支付宝支付</view>
						</view>

						<image class="two-image" src="../../style/image/cargo/round.png" alt="" />
					</view>

				</view>

				<view class="HR"></view>

				<view>
					<view class="footP">
						<view @click="addPosM" style="
        height: 2.5rem;
line-height: 2.5rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
        ">
							<!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
							<view style="margin-left: 0.2rem; display: flex; align-items: center;opacity: 0;">
								<image style="width: 1rem; height: 1rem" src="../../style/image/cargo/selectRound.png" alt="" />
								<view style="
              font-size: 0.7rem;
              font-family: PingFang SC;
              font-weight: 300;
              color: #666666;
              margin-left: 0.5rem;
            ">
									全选
								</view>
							</view>

							<view class="foot-right" style="margin-right: 0rem">
								<view style="
              font-size: 0.73rem;
              font-family: PingFang SC;
              font-weight: 300;
            ">
									合计:<span style="color: red">¥3.00</span>
								</view>
								<view class="settle">结算</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		list = [{
				text: "余额",
				color: "blue",
				fontSize: 28,
				subText: "感谢您的点赞",
			},
			{
				text: "支付宝",
			},
			{
				text: "微信",
			},
		];
		public show = true;

		created() {}

		mounted() {
			//  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
		}

		goBuy() {
			this.show = true;
		}
	}
</script>

<style lang="scss" scoped>
	.vipP {
		background-color: #dfc08d;
		height: 100vh;
	}

	>>>.u-drawer-content {
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
	}

	.modelP {
		padding: 0.5rem 1rem;
	}

	.item-one {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #eaedf0;
		padding: 0.5rem;
	}

	.item-one-left {
		display: flex;
		align-items: center;
	}

	.top-image {
		position: absolute;
		top: 1.6rem;
		right: 0.5rem;
		width: 0.5rem;
		height: 0.85rem;
		color: #666666;
	}

	.image-one {
		position: absolute;
		top: 0.8rem;
		right: 0.5rem;
		width: 0.5rem;
		height: 0.85rem;
		color: #666666;
	}

	.two-image {
		width: 1rem;
		height: 1rem;
	}

	.HR {
		height: 0.5rem;
		background-color: #f3f5f7;
	}

	.footP {
		/* position: absolute; */
		bottom: 0;
		background-color: white;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content-bottom {
		margin: 1rem;
	}

	.car-content {
		padding: 0rem 0.5rem 0.5rem 0.5rem;
	}

	.foot-right {
		display: flex;
	}

	.settle {
		background-color: #02af74;
		height: 100%;
		width: 5rem;
		text-align: center;
		font-size: 0.8rem;
		font-family: PingFang SC;
		font-weight: 400;
		color: white;
		margin-left: 1rem;
	}
</style>
